<template>
    <div class="base">
        <div class="box">
            <div class="content">
                <div class="title">
                    <img src="../../assets/img/vip.png" alt="">
                    <span>麻将比赛总则</span>
                </div>
                <div class="text-row1">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>将中国国家体育总局</span>
                </div>
                <div class="text-row2">
                    <span>于1998年颁布的</span>
                </div>
                <div class="text-row2">
                    <span>中国麻将竞赛规则为标准。</span>
                </div>
                <div class="text-row1">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>人性化比赛规则。</span>
                </div>
                <div class="text-row2">
                    <img src="../../assets/img/tuoyuan3.png" alt="">
                    <span>比赛中，</span>
                </div>
                <div class="text-row3">
                    <span>允许中途离开。</span>
                </div>
                <div class="text-row3">
                    <span>离开时，其他人正常比赛。</span>
                </div>
                <div class="text-row2">
                    <img src="../../assets/img/tuoyuan3.png" alt="">
                    <span>迟到者或离开后又返回者，</span>
                </div>
                <div class="text-row3">
                    <span>允许中途参与比赛。</span>
                </div>
                <div class="text-row2">
                    <img src="../../assets/img/tuoyuan3.png" alt="">
                    <span>因故不能参加比赛者，</span>
                </div>
                <div class="text-row3">
                    <span>经组委会同意，</span>
                </div>
                <div class="text-row3">
                    <span>允许派枪手参加比赛。</span>
                </div>
                <div class="text-row3">
                    <span>但是，</span>
                </div>
                <div class="text-row3">
                    <span>枪手不能中途参加比赛。</span>
                </div>
                <div class="text-row3">
                    <span>枪手有获奖权但无调位权</span>
                </div>
                <div class="text-row1">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>最终解释权归邀请赛组委会</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    activated() {
    },
    created() {

    },
    mounted() {
    },
    methods: {

    },
};
</script>

<style lang="less" scoped>
.base {
    background-color: #f3f0f6;
    height: 100%;
    color: #000;

    .box {
        width:100%;
        height: 100vh;
        min-height: 6.25rem;
        background-image: url(../../assets/img/11.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 30px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

        .content {
            padding: 0.5rem 0 0.75rem;

            .title {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 0.75rem;
                font-size: 0.4rem;
                font-weight: 700;
                line-height: 1.2;

                img {
                    height: 0.625rem;
                    margin-right: 0.375rem;
                }
            }

            .text-row1 {
                display: flex;
                justify-content: start;
                align-items: start;
                margin: 0.25rem 0;
                padding-left: 1.175rem;
                font-size: 0.375rem;
                line-height: 1.6;

                img {
                    width: 0.25rem;
                    margin-right: 0.5rem;
                    margin-top: 0.2rem;
                }
            }

            .text-row2 {
                display: flex;
                justify-content: start;
                align-items: start;
                margin: 0.25rem 0;
                padding-left: 1.875rem;
                font-size: 0.375rem;
                line-height: 1.6;

                img {
                    width: 0.25rem;
                    margin-right: 0.5rem;
                    margin-top: 0.2rem;
                }
            }

            .text-row3 {
                display: flex;
                justify-content: start;
                align-items: start;
                margin: 0.25rem 0;
                padding-left: 3.125rem;
                font-size: 0.375rem;
                line-height: 1.6;
            }
        }
    }

    .footer {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1.125rem 0;
        color: #868689;
        font-size: 0.4rem;
        font-weight: 700;
        line-height: 1.2;
    }
}
</style>